<template>
  <div id="box">
    <div class="navbar">
      <van-nav-bar
        title=" 上传图片"
        @click-left="$router.push('/adopt')"
        :border="false"
      >
        <template #left>
          <van-icon name="arrow-left" color="black" size="18px" />
        </template>
      </van-nav-bar>
    </div>
    <div id="banner">
      <form>
        昵称： <input type="text" v-model="nickname">
        <van-uploader :after-read="afterRead" v-model="fileList" :max-count="3" @delete="remove"/>
      </form>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant"
import axios from 'axios'
export default {
  data() {
    return {
      nickname: "",
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
    };
  },
  methods: {
    remove () {
      console.log(123)
    },
    afterRead(file) {
      if (!this.nickname) return Toast.fail('请输入宠物昵称')
      var data = new FormData();
      data.append("file", file.file);
      data.append("uid", this.$store.state.user.uid);
      data.append("nickname", this.nickname);
      data.append('uname', this.$store.state.user.uname)
      let config = {
        headers: {
          //添加请求头
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      //上传图片
      axios.post("http://1.15.223.82:3000/v1/addsubmitImg", data).then((res) => {
        console.log("res", res);
        if (res.data.status == 200) {
          return Toast.success('上传成功!')
        }else {
          return Toast.fail('上传失败!')
        }
      });
    },
  },
  mounted() {},
  computed: {},
};
</script>

<style lang="scss" scoped>
iframe {
  border: 0;
  width: 0;
  height: 0;
}
#box {
  width: 340px !important;
  height: 500px !important;
  box-sizing: border-box;
  overflow: hidden;
  #banner {
    margin: 0 auto;
    width: 300px !important;
  }
}
</style>
